<template>
  <el-scrollbar>
    <!-- <el-container >
      <h5>TodoMem</h5>
    </el-container> -->
    <el-menu ref="menus" :default-openeds="defOpen" :router="true" :default-active="this.$route.path">
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <alarm-clock/>
          </el-icon>
          今天
        </template>
        <el-menu-item-group>
          <!-- <template #title>Group 1</template> -->
          <el-menu-item index="1-1" route="/">Todo</el-menu-item>
          <el-menu-item index="1-2" route="/todayCard">
            Mem卡片
          </el-menu-item>
        </el-menu-item-group>
        <!-- <el-menu-item-group title="Group 2">
          <el-menu-item index="1-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title>Option4</template>
          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
        </el-sub-menu> -->
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <box/>
          </el-icon>
          <el-container>
            卡片集
          </el-container>
          <el-button style="margin-right: 20px; z-index: 999" round @click="clickCollection">管理</el-button>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="'2-' + index" v-for="(item, index) in menuList" :key="index"
                        :route="'/cardList?id='+item.id">
            {{ item.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>
<style scoped>
.el-menu {
  border-right: none;
}

.el-scrollbar {
  width: 100%;
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}
</style>

<script>
import {ref} from "vue";

export default {
  inject: ['reload'],
  name: 'AsideMenu',
  data() {
    return {
      menuList: ref([]),
      defOpen: ref(['1', '2'])
    };
  },
  methods: {
    handleSelect(key) {
      // console.log(keyPath);
      if (key === '2') {
        // this.$router.push('/cardCollectionList')
      }
    },
    clickCollection() {
      this.$router.push('/cardCollectionList');
      // this.$refs.menus.open("2");
    },
    getMenuList() {
      this.$axios.get("/dir/getAllDir1").then((response) => {
        this.menuList = response.data;
      });
    },
  },
  watch: {
    // $route: function() {
    //   console.log(this.$route);
    //   if (this.$route.path === '/cardCollectionList') {
    //     this.reload();
    //   }
    // }
  },
  created() {
    this.getMenuList();
  }
};
</script>
